<script lang="ts" setup>
import { Cell, CellGroup, Field, Switch } from 'vant'
import { OrderModel } from '~/model'

const {
  order,
  editable,
} = withDefaults(defineProps<{
  order: OrderModel
  editable?: boolean
}>(), {
  editable: false,
})

// function onEditNeedDelivery() {
//   if (!order) {
//     return
//   }
//   showConfirmDialog({
//     message: '提货方式',
//     cancelButtonText: '自提(无运费)',
//     confirmButtonText: '配送',
//   })
//     .then(() => {
//       order.needDelivery = true
//     })
//     .catch(() => {
//       order.needDelivery = false
//     })
// }

// const dialogDeleveryPersonShown = ref(false)
// function onEditDeleveryPerson() {
//   dialogDeleveryPersonShown.value = true
// }

const dialogReceiverShown = ref(false)
function onPickReceiver() {
  dialogReceiverShown.value = true
}

// function ifEditable(a: any, b: any = null) {
//   return editable ? a : b
// }
function ifNeedDelivery(a: any, b: any) {
  return (order?.needDelivery) ? a : b
}
// function getNameOr(contact: ContactModel | null, alt: string) {
//   return contact ? contact.name : alt
// }

const pairs = computed(() => {
  const res: [string, string][] = [
    [
      '配送方式',
      ifNeedDelivery('厂商配送', '到厂自提'),
    ],
    // [
    //   ifNeedDelivery('配送员', '提货人'),
    //   getNameOr(order.deliveryPerson ?? null, ifNeedDelivery(
    //     '未填写!',
    //     '留空',
    //   )),
    // ],
  ]

  if (order.needDelivery) {
    res.push([
      '收货人信息',
      order.receiver || '未填写!',
    ])
    res.push([
      '运费',
      order.fare.toString(),
    ])
  }

  return res
})
</script>

<template>
  <div v-if="order" mb2>
    <!-- Dialog -->
    <!-- <DeliveryPersonPick v-model="dialogDeleveryPersonShown" :order="order" @delete="order.deliveryPerson = undefined" /> -->
    <ReceiverPick v-if="editable && order && order.consumer" v-model="dialogReceiverShown" :order="order" />

    <!-- Edit -->
    <CellGroup v-if="editable">
      <Cell center title="配送服务">
        <template #right-icon>
          <Switch v-model="order.needDelivery" />
        </template>
      </Cell>
      <!-- <Cell
        :title="ifNeedDelivery('配送员', '提货人')"
        :value="ifNeedDelivery(
          getNameOr(order.deliveryPerson ?? null, '未填写'),
          getNameOr(order.deliveryPerson ?? null, '留空'),
        )"
        :is-link="true"
        @click="onEditDeleveryPerson"
      /> -->
      <div v-if="order.needDelivery">
        <Cell
          title="收货人信息"
          :value="order.receiver || '未填写'"
          :is-link="true"
          @click="onPickReceiver"
        />
        <Field
          :model-value="order.fare"
          label="运费"
          type="digit"
          placeholder="请填写运费"
          input-align="right"
          @update:model-value="order.fare = Number.parseInt($event)"
        />
      </div>
    </CellGroup>

    <!-- Display -->
    <PairsView v-else :pairs="pairs" />
  </div>
</template>

<style scoped></style>
